<template>
    <view class="content">
        <view v-bind:class="{active: isActive}">背景颜色测试</view>
        <view :class="[isred ? 'bg-red' : 'bg-blue']">三元表达式背景色测试</view>
        <view v-bind:style="{color: activeColor, fontSize: fontSize + 'px' , background:isred ? 'red' : '' }">测试文本
        </view>
        <view @click="doSomething">点击</view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                isActive: true,
                isred: false,
                fontSize: 30,
                activeColor: 'blue'
            }
        },
        onLoad() {

        },
        methods: {
            doSomething(){
                console.log("被点击了");
                this.isActive = false;
                this.isred =true;
                this.fontSize = 10;
                this.activeColor="white";
            }
        }
    }
</script>

<style>
    .active {
        background-color: red;
    }

    .bg-red {
        background-color: red;
    }

    .bg-blue {
        background-color: blue;
    }
</style>
